<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图书列表</title>
    <style type="text/css">
        body{
            margin: 0px;padding: 0px;
        }
         #bookdiv{
             width: 100%;
             height: 100%;
             padding: 5px;
         }
         #a{
             height:50px;
         }
        .a1{
            width:50% ;
            background: coral;
            float: left;line-height: 50px;
            text-align: center;font-size: x-large;
        }
        #b{
            height: 200px;
        }
        #b1{
            width: 40%;height: 200px;
            background: white;
            float: left;text-align: center;
        }
        #b2{
            width: 60%;line-height: 200px;
            background: white;
            float: left;
            text-align: center;font-size: xx-large;font-family: 华文行楷;
        }
        #c{
            height: 200px;
        }
        #c1{
            width: 40%;height: 200px;
            background: white;
            float: left;text-align: center;
        }
        #c2{
            width: 60%;line-height: 200px;
            background: white;
            float: left;
            text-align: center;font-size: x-large;
        }
        #d{
            height: 200px;
        }
        #d1{
            width: 40%;height: 200px;
            background: white;
            float: left;text-align: center;
        }
        #d2{
            width: 60%;line-height: 200px;
            background: white;
            float: left;
            text-align: center;font-size: x-large;
        }
        #bookdiv div div img{
            border: 3px solid darkred;
            margin: 35px;
        }

    </style>

</head>
<body>
      <div id="bookdiv">
          <div id="a">
              <div class="a1">计算机图书</div>
              <div class="a1">销售排行榜</div>
          </div>
          <div id="b">
              <div id="b1"><img src="../21.jpg" alt="Hibernate"/></div>
              <div id="b2"><a href="#">《使用Hibernate框架轻松连接数据库》</a></div>
          </div>
          <div id="c">
              <div id="c1"><img src="../37.jpg" alt="Struts"/></div>
              <div id="c2"><a href="#">《使用Struts搭建MVC模式商业应用》</a></div>
          </div>
          <div id="d">
              <div id="d1"><img src="../JF.jpg" alt="Spring"/> </div>
              <div id="d2"><a href="#">《使用Spring整合框架级银行业务简介》</a></div>
          </div>
      </div>
</body>
</html>